<template>
<div style="margin:0 20px 0 20px">
  <Row :gutter="20">
    <i-col :lg="8">
      <Card>
          <div style="text-align:center">
              <img src="https://dev-file.iviewui.com/stJXDnKhL5qEBD0dHSDDTKbdnptK6mV5/large">
              <h3>Henry</h3>
          </div>
          <DescriptionList style="margin-top:10px;" layout="horizontal" :col="12">
            <Description>
              <template #term>
                <Icon type="ios-briefcase-outline" />
              </template>
               全栈工程师
            </Description>
            <Description>
                <template #term>
                  <Icon type="ios-git-network" />
                </template>
               易二次改造的前端iview项目
            </Description>
            <Description>
               <template #term>
                <Icon type="ios-pin-outline" />
                </template>
               郑州市
            </Description>
          </DescriptionList>
          <Divider dashed></Divider>
          <Tag v-for="item in count" :key="item" :name="item" closable @on-close="handleClose2">标签{{ item + 1 }}</Tag>
          <Button icon="ios-add" type="dashed" size="small" @click="handleAdd"></Button>
      </Card>
    </i-col>
    <i-col :lg="16">
      <Card>
        <Tabs value="name1">
          <TabPane label="文章" name="name1">
            <Article :showPageHeader="showPageHeader"/>
          </TabPane>
          <TabPane label="项目" name="name2">
            <Projects :showPageHeader="showPageHeader"/>
          </TabPane>
          <TabPane label="应用" name="name3">
            <Apps :showPageHeader="showPageHeader"/>
          </TabPane>
        </Tabs>
      </Card>
    </i-col>
  </Row>
</div>
</template>

<script>
import Article from '@/components/search/search-article.vue'
import Projects from '@/components/search/search-projects.vue'
import Apps from '@/components/search/search-apps.vue'
export default {
    components:{
      Article,Projects,Apps
    },
    data () {
        return {
          showPageHeader:false,
          count: [0, 1, 2]
        }
    },
    methods: {
       handleAdd () {
            if (this.count.length) {
                this.count.push(this.count[this.count.length - 1] + 1);
            } else {
                this.count.push(0);
            }
        },
        handleClose2 (event, name) {
            const index = this.count.indexOf(name);
            this.count.splice(index, 1);
        }
    }
}
</script>
